<template>
	<div class="main ft-28" ref="scrollMain">
		<div class="detail-header dis-flex ft-28">
			<div class="header-left">期号详情</div>
			<div class="flex-1 header-right">开奖结果</div>
		</div>
		<div class="detail-list">
			<div class="detail-item dis-flex align-center" v-for="item in list">
				<div class="detail-left">
					<div class="h-40 l-40">第{{item.number}}期</div>
					<div class="draw-number">
						<div v-for="item1 in item.winNumberList" class="draw-number-item ft-24">{{item1}}</div>
					</div>
				</div>
				<div class="detail-right flex-1 ft-24">
					<div v-for="item1 in item.result">
						<span :class="'fw-'+item1.name_length">{{item1.name}}</span><span class="fw-back">：</span><span>{{item1.vals}}</span>
					</div>
					<!-- <div><span class="fw-3">龙虎和</span><span class="fw-back">：</span><span>龙</span></div>
					<div><span class="fw-2">斗牛</span><span class="fw-back">：</span><span>牛二</span></div>
					<div><span class="fw-2">趣味</span><span class="fw-back">：</span><span>一帆风顺</span></div> -->
				</div>
			</div>
			<div v-show="loadingmore" class="loadmore">正在加载...</div>
			<!-- <div class="detail-item dis-flex align-center">
				<div class="detail-left">
					<div class="h-40 l-40">第20180528091期</div>
					<div class="draw-number">
						<div class="draw-number-item ft-24">2</div>
						<div class="draw-number-item ft-24">0</div>
						<div class="draw-number-item ft-24">3</div>
						<div class="draw-number-item ft-24">1</div>
						<div class="draw-number-item ft-24">9</div>
					</div>
				</div>
				<div class="detail-right flex-1 ft-24">
					<div><span class="fw-2">和值</span><span class="fw-back">：</span><span>12 小 双</span></div>
					<div><span class="fw-3">龙虎和</span><span class="fw-back">：</span><span>龙</span></div>
					<div><span class="fw-2">斗牛</span><span class="fw-back">：</span><span>牛二</span></div>
					<div><span class="fw-2">趣味</span><span class="fw-back">：</span><span>一帆风顺</span></div>
				</div>
			</div> -->
		</div>
	</div>
</template>
<script>
	import {getDrawDetail} from '@/api/draw';
	export default {
		data(){
			return {
				list:[],
				loadingmore:false,
				total:0,
				nowLen:0
			}
		},
		mounted(){
			this.page=1;
			let params=this.$route.params;
			this.id=params.id;
			this.pageSize=20;
			this.startY=0;
			this.getDetail();
			
			document.addEventListener('touchstart',this.touchstart,false);
			document.addEventListener('touchmove',this.scroll,false);
		},
		beforeDestroy(){
			document.removeEventListener('touchmove',this.scroll,false);
			document.removeEventListener('touchstart',this.touchstart,false);
		},
		methods:{
			touchstart(e){
				this.startY=e.touches[0].pageY;
			},
			scroll(e){
				let self=this;
				if (this.nowLen<this.total&& !this.loadingmore) {
					let scrollTop=document.body.scrollTop;
					let clientheight=this.$refs.scrollMain.clientHeight;
					let winheight=window.innerHeight;
					if (clientheight-scrollTop<winheight+20) {
						let nowy=e.touches[0].pageY;
						if (nowy<self.startY) {
							e.preventDefault();
						}
						this.loadingmore=true;
						this.page++;
						this.getDetail();
					}
				}
			},
			getDetail(){
				getDrawDetail(this.id,this.page,this.pageSize).then(res=>{
					if (res.code==1) {
						let list=res.data.list;
						list.forEach(item=>{
							item.winNumberList=item.winNumber.split('');
						})
						this.nowLen+=list.length;
						this.total=res.data.total;
						this.list=this.list.concat(res.data.list);

					}
					this.loadingmore=false;
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/css/base.scss';
	$leftWidth:468px;
	.main{background:$gray;}
	.detail-header{padding: 20px 0;height: 40px;line-height:40px;background: #FFF;box-shadow: 0 6px 10px 0 rgba(195,195,195,0.22);}
	.header-left{width: $leftWidth;padding:0px 40px;box-sizing:border-box;}
	.detail-item{padding: 20px 0;border-bottom: 1px solid transparent; border-image: svg(1px-border param(--color #e9e9e9)) 2 2 stretch;border-top:0;}
	.detail-left{width: $leftWidth;padding-left: 40px;box-sizing: border-box;}
	.draw-number{margin-top: 14px;}
	.draw-number-item{display: inline-block;width: 48px;height:48px;line-height: 48px;margin-right:10px;background: $red;color: #FFF;border-radius: 50%;text-align: center;}
	.detail-right>div{height: 34px;line-height: 34px;}
	.fw-2{display: inline-block;width: 112px;letter-spacing:28px;}
	.fw-3{display: inline-block;width: 112px;letter-spacing: 2px;}
	.fw-back{margin-left: -36px;}
	.loadmore{padding: 20px;font-size: 32px;text-align: center;}
</style>